<template>
  <label>
    <label v-for="item in data" :key="item.code">
      <el-menu-item
        v-if="item.children==null || item.children.length == 0"
        :key="item.code"
        :data="item"
        :index="item.code"
      >
        <i :class="['fa','fa-'+item.icon]" :style="{'width':'23px','fontSize':'16px'}"></i>
        <span v-text="item.name"></span>
      </el-menu-item>

      <el-submenu
        v-if="item.children!=null && item.children.length > 0"
        :key="item.code"
        :data="item"
        :index="item.code"
      >
        <template slot="title">
          <i :class="['fa','fa-'+item.icon]" :style="{'width':'23px','fontSize':'18px'}"></i>
          <span v-text="item.name"></span>
        </template>
        <ItemMenu :data="item.children"></ItemMenu>
      </el-submenu>
    </label>
  </label>
</template>

<script>
export default {
  name: "ItemMenu",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  }
};
</script>

<style>
</style>
